<template>
<div class="boxt">
      <div class="site_box">
         <div class="header">
            <h4><router-link to="./home"><span class="iconfont">&#xe601; 返回</span></router-link>箱号入板</h4>
        </div>
        <div class="pack_box">
            <div class="main">
                <div class="paras">
                    <!-- <span>线别：{{this.$route.query.line}}</span><span>站点：{{this.$route.query.segment}}</span> -->
                     <span>111</span><span>222</span>
                </div>
            <pack-selector @fun_num="ChangePackselector" ref="ptNUm"></pack-selector>
            <div class="work">
                  <div class="work_order">
                    <p><span>工单完成数：</span><span>28</span></p>
                    <p><span>工单目标数：</span><span>30</span></p>
                </div>
                <div class="work_num">
                    <p><span>栈板完成数：</span><span>28</span></p>
                    <p><span>栈板目标数：</span><span>30</span></p>
                </div>
            </div>
            <div class="world_box">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="栈板号：">
                        <div class="comPack">
                             <el-input v-model="Palletnummber"  placeholder="" disabled></el-input>
                               <el-button @click="dialogVisible = true" class="cancel">×</el-button>
                        </div>
                    </el-form-item>
                    <el-dialog title="提示" :visible.sync="dialogVisible" >
                        <span>此栈板未满,确定要关闭栈板吗？</span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                        </span>
                    </el-dialog>
                    <!-- <button @click="onSubmit" class="cancel">×</button> -->
                </el-form>
            </div>
            <div class="pack_num">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="箱号：">
                        <div class="comPack comPack2">
                            <el-input ref="AAA" @focus="forbid"></el-input>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="pack_list">
               <p>清单：</p>
               <ul>
                   <li class="ptitle">箱号</li>
                   <li class="ptitle">数量</li>
                   <li class="ptitle">时间</li>
                   <li>001</li>
                   <li>3</li>
                   <li>2020.09.01 20.30.35</li>
                   <li>002</li>
                   <li>5</li>
                   <li>2020.10.05 08.45.49</li>
                   <li>003</li>
                   <li>4</li>
                   <li>2020.10.22 09.23.59</li>
               </ul>
            </div>
        </div>
        </div>  
    </div>
</div>
</template>

<script>
// import PackageSelector from './Selector/PackageSelector'
import PackSelector from './Selector/PackSelector'
export default {
    name: 'Package',
    components: {
        PackSelector
    },
     data() {
      return {
        isShow: true,
        dialogVisible: false,
        formInline: {
          user: '',
          region: '',
          content: '',
        },
        Palletnummber: '' ,
        num: 'aaaa',
         ptState: ''
      }
    },
    methods: {
      onSubmit () {
        console.log('submit!');
      },
      ChangePackselector (data,state){
        this.ptState = state;
        console.log('state',state);
        console.log('this.ptState', this.ptState);
        this.$refs.ptNUm.getPallets(this.ptState);
        this.Palletnummber = data;
        this.$nextTick(() => {
        this.$refs.AAA.focus()
        })
      },
      forbid(){
        //禁止软键盘弹出
        document.activeElement.blur();
      }
    }
}
</script>

<style scoped>
    .header,.header h4,.site_box{
        overflow: hidden
    }
     .partNo{
        margin-top: 0px;
    }
    .site_box{
        padding:0;
        margin:0 auto;
    }
    .header{
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #2d3a4b;
        color: #fff;
        position:fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999999;
    }
     .header h4{
        padding: 0;
        margin: 0;
        text-align: center;
        font-size: 1.1rem;
     }
    .header h4 span{
        display: block;
        font-size: 0.9rem;
        position:absolute;
        top:0px;
        left: 10px;
        cursor: pointer;
        color: #fff;
    }
    .header h4 span:hover{
        color: rgb(169, 169, 177);
    }
    /* 线别站别 */
    .paras{
        width: 100%;
    }
    .paras span{
        display: block;
        width: 50%;
        color: #999;
        font-size: 0.9rem;
        font-weight: 400;
        height: 30px;
        line-height: 30px;
        float: left;
    }
    /* main */
    .main{
        width: 100%;
        margin-top: 30px;
        margin-left: 0px;
    }
    form{
        margin-top: 15px;
        margin-bottom: -20px;
    }
    .work{
        width: 100%;
        display: flex;
        height: 80px;
    }
    .pack_list p{
        text-indent: 1.1em;
        margin-top: -10px;
    }
    .pack_list  ul{
        list-style-type: none;
        width: 100%;
        padding: 0;
    }
    .pack_list ul li{
        display: block;
        float: left;
        border: 1px solid rgb(231, 230, 230);
        width: 30%;
        float: left;
        text-align: center;
        margin-left: -1px;
        margin-top: -1px;
        color: #333;
        font-size: 0.9rem;
        height: 30px;
        line-height: 30px;
    }
    .pack_list ul li:nth-child(3n+3){
        width: 49%;
    }
    .pack_list ul li:nth-child(3n-1){
        width: 20%;
    }
    .pack_list{
        margin-top: -10px;
    }
    .ptitle{
        font-weight: 400;
    }
    .work_order,.work_num,.pack_list p{
        height: 20px;
        line-height: 20px;
        flex: 1;
        color: #333;
        font-size: 0.9rem;
        font-weight: 400;
    }
    .work_order p{
        margin-right: 26px;
    }
    .work_num p{
        margin-right: 26px;
    }
    .work_num{
        margin-bottom: 30px;
    }
     .work_order p span:last-child, .work_num p span:last-child{
        color:rgb(117, 115, 115);
    }
    .pack_num{
        margin-left: 20px;
        margin-top: -10px;
    }
    .pack_box{
        width: 96%;
        margin: 0 auto;
        margin-top: 60px;
    }
    .pack_box>>>.el-dialog {
        width: 70%!important;
        top: 20%!important;
    }
    .el-form-item{
        width: 100%;
    }
    .comPack{
        width: 100%;
        box-sizing: border-box;
        padding-left: 80px;
        padding-right: 60px;
        float: left;
        position: relative;
    }
    .comPack2{
        padding-left: 62px;
    }
    .pack_box>>>.el-form--inline .el-form-item__content{
        width: 100%;
        margin-top: -40px;
    }
    .cancel{
        width: 24px;
        height: 24px;
        border-radius: 100%;
        vertical-align: center;
        text-align: center;
        cursor: pointer;
        padding: 0;
        position: absolute;
        top: 8px;
        right: 10px;
    }
</style>